<template>
<div>

    <Head />
    <div class="about">

        <div class="main">
            <div class="iframe-box">
                <iframe :src='ifram_url' id='myframe' />
            </div>
            <div class="iframe-tips">
                <!-- <a-button type="primary" v-clipboard:copy="copy" v-clipboard:success="onCopy">复制预览</a-button> -->
                <a-button type="primary" @click="save">保存</a-button>
            </div>
        </div>

        <div style="width: 100%; flex: 1">
            <Select1 @reloadHandleClick="reloadHandleClick" :propData="propData" />
            <!-- <a-button @click="reloadHandleClick">click me to load.</a-button> -->
        </div>

    </div>
</div>
</template>

<script>
import Head from '@/components/nav.vue'
import Select1 from '../album/diy1'
// import store from '@/store/index'
import axios from 'axios'

export default {

    name: 'main2',
    components: {
        Head,
        Select1
    },
    data() {
        return {
            // ifram url
            ifram_url: 'http://newtestme.liticool.xyz/xujinshan.photo_operators/main',
            // copy url
            copy: `${window.location.href}preview`,
            // 场景
            scenes: [{
                key: '',
                value: '',
                material: []
            }],
            // 动画
            animations: [{
                key: '',
                value: '',
                material: []
            }],
            // 过场
            convensions: [{
                key: '',
                value: '',
                material: []
            }],
            propData: {
                scenes: [],
                animations: [],
                convensions: [],
            },

            saveData: 0
        }
    },
    beforeCreate() {

    },
    mounted() {
        //获取iframe元素
        const iFrame = document.getElementById('myframe')
        console.log(iFrame)

        //iframe加载完毕后再发送消息，否则子页面接收不到message
        iFrame.onload = function () {
            //iframe加载完立即发送一条消息
            // this. is a test to check this function is alive.
            // This is a passage i wrote at moyu-time and i am waiting to go home at six, oh my god I hope the time will be fast and fast and fast.
            // iFrame.contentWindow.postMessage({
            //     waha: 'text_and_test'
            // }, '*');
        }

        this.initScene()

    },

    methods: {
        reloadHandleClick(data) {
            console.log('ha')
            console.log(data)
            console.log('ha')
            const iFrame = document.getElementById('myframe')

            let currentTheme = {
                cover: "http://resmedias.lititop.group/images/beforefive/nvrenruhua.gif",

                mid: "nvrenruhua",
                name: "女人如花",
                pay: 0,
                scene: [],
                tid: "funvjiekuaile",
            }

            // store.dispatch('SETINFO', currentTheme)
            //     .then(res => {
            //         console.log(res)
            //     })

            currentTheme = {
                ...currentTheme,
                ...data
            }

            this.saveData = {
                ...currentTheme
            }

            iFrame.contentWindow.postMessage({
                currentTheme
            }, '*');
        },

        // 复制预览链接
        onCopy() {
            this.$message.success('复制成功')
        },
        // 保存模板信息
        save() {
            const _this = this;

            if (this.saveData) {
                console.log(this.saveData)

                axios.post("http://192.168.0.118:23333/api/saveTemplate", {
                        material: _this.saveData
                    })
                    .then(res => {
                        console.log(res.data)
                        if (res.data.msg == 'ok') {
                            this.saveData = 0
                            _this.$message.success('保存成功')
                        } else {
                            _this.$message.error('保存失败')
                        }

                    })
            } else {
                _this.$message.error('请配置组合')
            }
            return;
        },

        // 初始化
        initScene() {
            const _this = this;
            axios.get("http://192.168.0.118:23333/api/fetchScene", {
                    headers: {
                        'Accept': 'application/json;application/json',
                        'Content-Type': 'application/json;charset=UTF-8;'
                    }
                })
                .then(res => {
                    console.log(res.data)
                    _this.propData.scenes = [...res.data.map(i => ({
                        key: i.id,
                        value: i.id,
                        material: i.material
                    }))]
                    _this.initAnimation()
                })
        },
        initAnimation() {
            const _this = this;
            axios.get("http://192.168.0.118:23333/api/fetchAnimation", {
                    headers: {
                        'Accept': 'application/json;application/json',
                        'Content-Type': 'application/json;charset=UTF-8;'
                    }
                })
                .then(res => {
                    console.log(res.data)
                    _this.propData.animations = [...res.data.map(i => ({
                        key: i.id,
                        value: i.id,
                        material: i.material
                    }))]
                    _this.initConvension()
                })
        },
        initConvension() {
            const _this = this;
            axios.get("http://192.168.0.118:23333/api/fetchConversion", {
                    headers: {
                        'Accept': 'application/json;application/json',
                        'Content-Type': 'application/json;charset=UTF-8;'
                    }
                })
                .then(res => {
                    console.log(res.data)
                    _this.propData.convensions = [...res.data.map(i => ({
                        key: i.id,
                        value: i.id,
                        material: i.material
                    }))]
                })
        },

    },
}
</script>

<style lang="less" scoped>
.about {
    position: relative;
    width: 100%;
    display: flex;
    padding-top: 10px;
    padding-left: 10px;

    .main {
        position: relative;
        width: 360px;
        // height: 540px;
        box-sizing: border-box;
        padding-right: 400px;
        margin-right: 40px;
        border-right: 1px solid #eee;

        .iframe-box {
            position: relative;

            #myframe {
                position: absolute;
                top: -270px;
                left: -180px;
                width: 720px;
                height: 1080px;
                border: none;
                transform: scale(.5);
            }

        }

        .iframe-tips {
            position: relative;
            box-sizing: border-box;
            padding-top: 580px;
            width: 360px;
            display: flex;
            flex-direction: column;

            button {
                width: 100px;
                margin-bottom: 5px;
            }
        }
    }

    .dynamic-delete-button {
        cursor: pointer;
        position: relative;
        top: 4px;
        font-size: 24px;
        color: #999;
        transition: all 0.3s;
    }

    .dynamic-delete-button:hover {
        color: #777;
    }

    .dynamic-delete-button[disabled] {
        cursor: not-allowed;
        opacity: 0.5;
    }
}
</style>
